<template>
  <view class="home-page bg-gray-100 min-h-screen px-4 pt-4">
    <!-- 顶部用户信息卡片 -->
    <view
      class="user-info-card flex items-center bg-white rounded-xl shadow-sm px-4 py-4 mb-4"
      :style="{ cursor: !isLogin ? 'pointer' : 'default' }"
    >
      <view class="avatar-lg" />
      <view class="ml-4 flex-1">
        <template v-if="isLogin">
          <view class="font-bold text-base flex items-center"
            >{{ userInfo.username || "用户" + userInfo.id }}
            <text class="ml-1 text-yellow-500">👑</text></view
          >
          <view class="text-xs text-gray-500 mt-1">会员：已到期</view>
        </template>
        <template v-else>
          <view
            class="font-bold text-base flex items-center"
            @click="!isLogin && toLink('/pages-sub/login-register')"
            >未登录</view
          >
          <view class="text-xs text-gray-400 mt-1" @click="!isLogin && toLink('/pages-sub/login-register')">请点击登录</view>
        </template>
      </view>
    </view>

    <!-- 四大功能icon区 -->
    <view class="flex justify-between mb-4">
      <view
        class="center-func-item"
        @click="toLink('/pages-sub/home/favorite')"
      >
        <view class="func-icon bg-purple-200 text-purple-600">★</view>
        <view class="func-label">我的收藏</view>
      </view>
      <view
        class="center-func-item"
        @click="toLink('/pages-sub/home/reading-record')"
      >
        <view class="func-icon bg-pink-200 text-pink-600">📕</view>
        <view class="func-label">阅读记录</view>
      </view>
      <!-- <view class="center-func-item" @click="toLink('/pages-sub/home/recycle')">
        <view class="func-icon bg-blue-200 text-blue-600">🗑️</view>
        <view class="func-label">回收站</view>
      </view> -->
      <view class="center-func-item" @click="toLink('/pages-sub/home/profile')">
        <view class="func-icon bg-green-200 text-green-600">👤</view>
        <view class="func-label">个人资料</view>
      </view>
    </view>

    <!-- 会员相关、设置、客服、退出登录列表 -->
    <view class="center-list bg-white rounded-xl shadow-sm">
      <view
        class="center-list-item flex items-center px-4 py-3 border-b border-gray-100"
      >
        <text class="list-icon">💰</text>
        <text class="flex-1 ml-2">购买会员</text>
        <text class="text-xs text-gray-400">畅读所有绘本</text>
        <text class="ml-2 text-gray-400">&gt;</text>
      </view>
      <view
        class="center-list-item flex items-center px-4 py-3 border-b border-gray-100"
      >
        <text class="list-icon">💎</text>
        <text class="flex-1 ml-2">分享送会员</text>
        <text class="text-xs text-gray-400">可获得终身会员</text>
        <text class="ml-2 text-gray-400">&gt;</text>
      </view>
      <view
        class="center-list-item flex items-center px-4 py-3 border-b border-gray-100"
        @click="toLink('/pages-sub/home/setting')"
      >
        <text class="list-icon">⚙️</text>
        <text class="flex-1 ml-2">设置</text>
        <text class="text-xs text-gray-400">横竖屏</text>
        <text class="ml-2 text-gray-400">&gt;</text>
      </view>
      <view
        class="center-list-item flex items-center px-4 py-3 border-b border-gray-100"
      >
        <text class="list-icon">💬</text>
        <text class="flex-1 ml-2">在线客服</text>
        <text class="text-xs text-gray-400">工作时间：9:00-21:00</text>
        <text class="ml-2 text-gray-400">&gt;</text>
      </view>
      <view class="center-list-item flex items-center px-4 py-3" v-if="isLogin">
        <text class="list-icon text-red-400">⎋</text>
        <text class="flex-1 ml-2 text-red-500" @click="handleLogout"
          >退出登录</text
        >
      </view>
    </view>

    <!-- 横屏切换按钮 -->
    <view class="flex justify-center mt-6 mb-4">
      <button class="screen-toggle-btn" @click="toggleScreenOrientation">
        <text class="btn-icon">🔄</text>
        <text class="btn-text">切换横屏</text>
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useUserStore } from "@/store/user";
import { storeToRefs } from "pinia";
import { computed, ref } from "vue";

const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);

// 屏幕方向状态
const isLandscape = ref(false);

function toLink(url) {
  uni.navigateTo({ url });
}

// 判断是否登录
const isLogin = computed(
  () => !!userInfo.value && userInfo.value.id && userInfo.value.token
);

// 退出登录
const handleLogout = async () => {
  await userStore.logout();
};

// 模拟登录（未登录时点击用户信息区域）
const mockLogin = () => {
  // userStore.setUserInfo({
  //   id: 105898926,
  //   username: "用户105898926",
  //   avatar: "/static/images/default-avatar.png",
  //   token: "mock-token",
  // });
};

// 切换屏幕方向
const toggleScreenOrientation = () => {
  // #ifdef APP-PLUS
  try {
    const orientation = isLandscape.value ? "portrait" : "landscape";
    plus.screen.lockOrientation(orientation);
    isLandscape.value = !isLandscape.value;
    uni.showToast({
      title: isLandscape.value ? "已切换为横屏" : "已切换为竖屏",
      icon: "none",
    });
  } catch (err) {
    console.error("切换屏幕方向失败:", err);
    uni.showToast({
      title: "切换失败",
      icon: "error",
    });
  }
  // #endif

  // #ifdef MP-WEIXIN
  // 微信小程序横屏切换
  if (isLandscape.value) {
    // 切换到竖屏
    isLandscape.value = false;
    uni.showToast({
      title: "已切换为竖屏",
      icon: "none",
    });
  } else {
    // 切换到横屏
    isLandscape.value = true;
    uni.showToast({
      title: "已切换为横屏，请旋转设备",
      icon: "none",
      duration: 2000,
    });

    // 提示用户手动旋转设备
    setTimeout(() => {
      uni.showModal({
        title: "横屏模式",
        content: "请将设备旋转为横屏以获得最佳体验",
        showCancel: false,
        confirmText: "知道了",
      });
    }, 1000);
  }
  // #endif

  // #ifndef APP-PLUS || MP-WEIXIN
  uni.showToast({
    title: "请手动旋转设备或前往设置切换屏幕方向",
    icon: "none",
    duration: 3000,
  });
  // #endif
};
</script>
<style scoped>
.home-page {
  background: #f7f8fa;
}
.avatar-lg {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #b3b7ff;
  display: inline-block;
}
.user-info-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.04);
}
.center-func-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.func-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 6px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.04);
}
.func-label {
  font-size: 13px;
  color: #444;
}
.center-list {
  margin-top: 8px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.04);
}
.center-list-item {
  font-size: 15px;
}
.list-icon {
  font-size: 22px;
  width: 28px;
  text-align: center;
}

.screen-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 25px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
}

.screen-toggle-btn:active {
  transform: scale(0.95);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

.btn-icon {
  font-size: 18px;
  margin-right: 8px;
}

.btn-text {
  font-size: 16px;
}
</style>
